<template>
  <div class="item-info">
    <div class="item-info-container">
      <div class="item-info-master">
        <span class="label f12" style="background-color: rgb(120, 160, 209);">直降</span>
        <span class="label f12" style="background-color: rgb(145, 188, 111);">包邮</span>
        {{product.masterName}} {{product.slaveName}}
      </div>
      <div class="item-info-slave color-gray">果园生态种植 皮薄香甜爽口 富含天然维C</div>
      <div class="item-info-price flex jc-sb ai-fe mt-10">
        <span>
          <span class="price mr-5" style="font-size:15px">￥</span>
          <span class="f20 price mr-5">44.9</span>
          <span class="f12 old-price mr-5 color-gray" style="text-decoration:line-through;">￥56.9</span>
        </span>
        <span class="f12 color-gray">3932人购买</span>
      </div>
    </div>
    <!-- 数目弹框 -->
    <div class="item-cell">
      <van-cell is-link @click="showPopup" style="font-size:13px">
        <span class="color-gray">规格： X</span>
        {{count}}
      </van-cell>
      <van-popup v-model="show" position="bottom" :style="{ height: '60%' }">
        <div class="topic flex mt-15">
          <img
            class="img-backcolor"
            src="https://mall.s.maizuo.com/5f727ae93559d9c445e944a58211b538.png?x-oss-process=image/resize,w_563"
            alt
          />
          <div class="flex2 jc-c" style="height:100%">
            <div style="margin-bottom:4px">
              <span class="price mr-5" style="font-size:15px;">￥</span>
              <span class="f20 price mr-5" style="margin-bottom:4px;">44.9</span>
            </div>
            <div>&nbsp;X {{count}}</div>
          </div>
        </div>
        <div class="count-box">
          <div>数量</div>
          <div class="small-box">
            <span style="width:40px;border:1px solid gray;">-</span>
            <span style="width:72px;border:1px solid gray;border-left:0;">{{count}}</span>
            <span style="width:40px;border:1px solid gray;border-left:0;">+</span>
          </div>
        </div>
        <van-goods-action style="width:100%">
          <van-goods-action-button
            color="white"
            style="color:black"
            class="add-cart"
            type="warning"
            text="加入购物车"
            @click="onClickButton"
          />
          <van-goods-action-button
            style="border-radius:0;height:50px;margin-right:0"
            type="danger"
            text="立即购买"
            color="#c03131"
            @click="onClickButton"
          />
        </van-goods-action>
      </van-popup>
    </div>
    <!-- 未登录地址选择弹框 -->
    <div class="address-select">
      <van-cell is-link @click="showPopup2" class="fcc">
        <span class="color-gray">配送至：</span>
        <span class="more-text selected-address" style>上海黄浦区非机动啥假发票感觉到破案机机感觉到破案机机感觉到破案机机机机机构</span>
      </van-cell>
      <van-popup v-model="show2" position="bottom" :style="{ height: '60%' }">
        <div class="msg">
          <div class="f15" style="margin-bottom:4px;">请选择配送区域</div>
          <div class="f12" style="color:red;">未显示地区即超出配送范围，无法进行选择</div>
        </div>
        <div style="height:20px" class="ml-15">湖南省/衡阳市/耒阳市</div>
        <van-area :area-list="areaList" style="color:black" />
      </van-popup>
    </div>
    <div class="baged f12 flex ai-c" style>
      <van-icon name="passed" icon-size="12px" color="red" style="margin-right:5px;" />
      <span class="color-gray">包邮</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["product"],
  data() {
    return {
      count: 2,
      current: 0,
      show: false,
      show2: false,
      show3: false,
      areaList: {
        province_list: {
          110000: "北京市",
          120000: "天津市"
        },
        city_list: {
          110100: "北京市",
          110200: "县",
          120100: "天津市",
          120200: "县"
        },
        county_list: {
          110101: "东城区",
          110102: "西城区",
          110105: "朝阳区",
          110106: "丰台区",
          120101: "和平区",
          120102: "河东区",
          120103: "河西区",
          120104: "南开区",
          120105: "河北区"
        }
      }
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    showPopup2() {
      this.show2 = true;
    },
    showPopup3() {
      this.show3 = true;
    },
    buyImmediate() {
      this.$router.push("/order/confirm");
    },
    onClickIcon() {
      this.$router.push("/cart/befor");
    },
    onClickButton() {},
    onChange(index) {
      this.current = index;
    }
  }
};
</script>

<style>
</style>